import { h, render } from "vue";
import Connect from "./Connect.vue";

export default function registerSection(lf) {
  lf.register("section", ({ HtmlNode, HtmlNodeModel }) => {
    class ConnectNode extends HtmlNode {
      setHtml(rootEl) {
        const { properties } = this.props.model;
        console.log("this.props.model", this.props.model);

        const el = document.createElement("div");
        rootEl.innerHTML = "";
        const Profile = h(Connect, {
          name: properties.workProcedureName,
          onClick: () => clickFunction(),
          // on: {
          //   'select-button': (type) => {
          //     console.log('select-button', type)
          //   }
          // }
        });
        render(Profile, el);
        rootEl.appendChild(el);
        const clickFunction = () => {
          const { graphModel, model } = this.props;
          graphModel.eventCenter.emit("custom:button-click", model);
        };
      }
    }
    class ConnectNodeModel extends HtmlNodeModel {
      setAttributes() {
        this.menu = [
          {
            text: "删除",
            callback: (node) => {
              this.graphModel.deleteNode(node.id);
            },
          },
          {
            text: "复制",
            callback: (node) => {
              this.graphModel.cloneNode(node.id);
            },
          },
        ];
      }
      initNodeData(data) {
        data.text = {
          editable: false,
        };
        super.initNodeData(data);
        const width = 100;
        const height = 40;
        this.width = width;
        this.height = height;
      }
    }
    return {
      type: "section",
      view: ConnectNode,
      model: ConnectNodeModel,
    };
  });
}
